<template>
  <view class="edit-profile">
    <view class="avatar-section">
      <view class="avatar-wrapper" @tap="uploadImage">
        <image :src="userInfo.avatarUrl" class="avatar" mode="aspectFill"></image>
        <text class="tip">点击更换头像</text>
      </view>
    </view>

    <view class="form-section">
      <view class="form-item">
        <text class="label">昵称</text>
        <input type="text" v-model="userInfo.username" placeholder="请输入昵称" />
      </view>
    </view>

    <view class="button-section">
      <button class="save-btn" @tap="handleSave" :loading="loading">保存</button>
    </view>
  </view>
</template>

<script>
import { userApi } from '@/api/user'

export default {
  data() {
    return {
      userInfo: {
        username: '',
        avatarUrl: ''
      },
      loading: false
    }
  },
  
  onLoad() {
    // 获取本地存储的用户信息
    const userInfo = uni.getStorageSync('userInfo')
    if (userInfo) {
      this.userInfo = { ...userInfo }
    }
  },
  
  methods: {
    async uploadImage() {
      try {
        const res = await new Promise((resolve, reject) => {
          uni.chooseImage({
            count: 1,
            sizeType: ['compressed'],
            sourceType: ['album', 'camera'],
            success: resolve,
            fail: reject
          })
        })
        
        if (res.tempFilePaths && res.tempFilePaths.length > 0) {
          uni.showLoading({
            title: '上传中...'
          })
          
          // 上传图片并获取返回的URL
          const imageUrl = await userApi.uploadAvatar(res.tempFilePaths[0])
          
          // 更新头像URL
          this.userInfo.avatarUrl = imageUrl
          
          uni.showToast({
            title: '上传成功',
            icon: 'success'
          })
        }
      } catch (error) {
        console.error('上传错误:', error)
        uni.showToast({
          title: error.message || '上传失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    async handleSave() {
      if (this.loading) return
      if (!this.userInfo.username.trim()) {
        uni.showToast({
          title: '请输入昵称',
          icon: 'none'
        })
        return
      }
      
      this.loading = true
      try {
        const res = await userApi.updateUserInfo({
          username: this.userInfo.username,
          avatarUrl: this.userInfo.avatarUrl
        })
        
        if (res.code === 200) {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })
          
          // 延迟返回上一页
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          throw new Error(res.errorMessage || '保存失败')
        }
      } catch (error) {
        uni.showToast({
          title: error.message || '保存失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss">
.edit-profile {
  padding: 40rpx;
  
  .avatar-section {
    display: flex;
    justify-content: center;
    margin-bottom: 60rpx;
    
    .avatar-wrapper {
      text-align: center;
      
      .avatar {
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
        margin-bottom: 20rpx;
      }
      
      .tip {
        font-size: 28rpx;
        color: #666;
      }
    }
  }
  
  .form-section {
    .form-item {
      display: flex;
      align-items: center;
      padding: 30rpx 0;
      border-bottom: 2rpx solid #f5f5f5;
      
      .label {
        width: 140rpx;
        font-size: 32rpx;
        color: #333;
      }
      
      input {
        flex: 1;
        height: 80rpx;
        font-size: 32rpx;
      }
    }
  }
  
  .button-section {
    margin-top: 80rpx;
    
    .save-btn {
      background: #007AFF;
      color: #fff;
      height: 88rpx;
      line-height: 88rpx;
      border-radius: 44rpx;
      font-size: 32rpx;
    }
  }
}
</style> 